<!--
    * @Author: zhujunzhujunzhu 2693474327@qq.com
    * @Date: 2022-11-25 09:18:24
    * @LastEditors: zhujunzhujunzhu 2693474327@qq.com
    * @LastEditTime: 2022-11-26 17:55:59
    * @FilePath: \web-gl-learn\canvas\index.html
    * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
   -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500"></canvas>
  </body>
</html>
<script src="./ball.js"></script>
<script src="./tool.js"></script>
<script>
  async function main() {
    const canvas = document.getElementById("canvas");
    // 获取canvas上下文
    const cxt = canvas.getContext("2d");
    let x = 0;

    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const radius = 150;
    const a = 200;
    const b = 160;
    const ball = new Ball(100, 25, 30, "red", 2, 2);
    const ball1 = new Ball(100, 25, 30, "red", 2, 2);
    let angle = 0;
    const image = new Image();
    image.width = 12;
    image.height = 12;
    image.src = "./rong.jpg";
    await new Promise((resolve) => {
      image.onload = function () {
        resolve();
      };
    });

    //   先画一个椭圆

    function EllipseOne(cxt, x, y, a, b) {
      var step = a > b ? 1 / a : 1 / b;
      cxt.beginPath();
      cxt.moveTo(x + a, y);
      for (var i = 0; i < 2 * Math.PI; i += step) {
        cxt.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
      }
      cxt.closePath();
      cxt.fillStyle = "red";
      cxt.fill();
    }

    EllipseOne(cxt, centerX, centerY, a, b);

    function frame() {
      window.requestAnimationFrame(frame);

      // 先清空画布
        cxt.clearRect(0, 0, canvas.width, canvas.height);
        EllipseOne(cxt, centerX, centerY, a, b);
      // 绘制圆
      cxt.beginPath();
      cxt.arc(centerX, centerY, radius, 0, (360 * Math.PI) / 180, true);
      cxt.closePath();
      //   cxt.clip()
      //   cxt.drawImage(image,10,10,150,150)

      // cxt.fillStyle = '#6699ff'
      // cxt.stroke();
      // 计算小球坐标
      ball.x = centerX + Math.cos(angle) * a;
      ball.y = centerY + Math.sin(angle) * b;
      //   if (angle == 90) {
      //     ball1.x = centerX;
      //     ball1.y = centerY + 150;
      //   } else if (angle == 270) {
      //     ball1.x = centerX + 0;
      //     ball1.y = centerY - 150;
      //   } else if (angle > 0 && angle < 90) {
      //     ball1.x =
      //       centerX +
      //       Math.sqrt(
      //         (250 * 250 * 150 * 150) /
      //           (150 * 150 + 250 * 250 * Math.tan(angle) * Math.tan(angle))
      //       );
      //     ball1.y =
      //       centerY +
      //       Math.sqrt(
      //         ((250 * 250 * 150 * 150) /
      //           (150 * 150 + 250 * 250 * Math.tan(angle) * Math.tan(angle))) *
      //           Math.tan(angle)
      //       );
      //   } else if (angle > 90 && angle < 180) {
      //     ball1.x =
      //       centerX -
      //       Math.sqrt(
      //         (250 * 250 * 150 * 150) /
      //           (150 * 150 + 250 * 250 * Math.tan(angle) * Math.tan(angle))
      //       );
      //     ball1.y =
      //       centerY +
      //       Math.sqrt(
      //         ((250 * 250 * 150 * 150) /
      //           (150 * 150 + 250 * 250 * Math.tan(angle) * Math.tan(angle))) *
      //           Math.tan(angle)
      //       );
      //   } else if (angle > 180 && angle < 270) {
      //     ball1.x =
      //       centerX -
      //       Math.sqrt(
      //         (250 * 250 * 150 * 150) /
      //           (150 * 150 + 250 * 250 * Math.tan(angle) * Math.tan(angle))
      //       );
      //     ball1.y =
      //       centerY -
      //       Math.sqrt(
      //         ((250 * 250 * 150 * 150) /
      //           (150 * 150 + 250 * 250 * Math.tan(angle) * Math.tan(angle))) *
      //           Math.tan(angle)
      //       );
      //   } else {
      //     ball1.x =
      //       centerX +
      //       Math.sqrt(
      //         (250 * 250 * 150 * 150) /
      //           (150 * 150 + 250 * 250 * Math.tan(angle) * Math.tan(angle))
      //       );
      //     ball1.y =
      //       centerY -
      //       Math.sqrt(
      //         ((250 * 250 * 150 * 150) /
      //           (150 * 150 + 250 * 250 * Math.tan(angle) * Math.tan(angle))) *
      //           Math.tan(angle)
      //       );
      //   }
      ball.image(cxt, image);
      //  ball1.image(cxt,image);
      // 角度递增
      angle += 0.02;
      // if(angle>=360){
      //     angle=0
      // }
    }
    frame();
    // cxt.scale(2,2)
  }

  main();
</script>
